import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { todoAsync } from '../../redux/slice'
import './Header.css'
export default function Header() {
  const dispatch = useDispatch()
  const loading = useSelector((state) => {
    return state.todoList.loading
  })
  return (
    <div className="todo-header">
      <input
        type="text"
        onKeyDown={(e) => {
          const value = e.target.value.trim()
          if (!value || e.key !== 'Enter') return
          dispatch(todoAsync(value))
          e.target.value = ''
        }}
      />
      {loading && (
        <div style={{ color: 'red', fontSize: 20 }}>正在添加请稍后...</div>
      )}
    </div>
  )
}
